<template>
  <div class="wp">
    <h3>账户余额: <span>¥20.0</span></h3>
    <div class="d-1">
      <div class="d-2">
        <span>请充值金额</span>
        <div class="d-3">
          <span :class='aa==true?"on":""' @click="btn1">500元</span>
          <span :class='bb==true?"on":""' @click="btn2">1000元</span>
          <span :class='cc==true?"on":""' @click="btn3">2000元</span>
        </div>
      </div>
      <div class="d-4">
        <h4>充值有礼</h4>
        <div class="d-5">
          <div class="d-6">
            <span>充500元送:</span>
            <div class="d-7">
              <span><img src="./images/liwu.png" alt=""></span>
             <div class="d-8">
               <span>新疆哈密瓜25kg</span>
               <span>价值 : 500</span>
             </div>
            </div>
          </div>
          <div class="d-6">
             <span>充1000元送:</span>
            <div class="d-7">
              <span><img src="./images/liwu.png" alt=""></span>
             <div class="d-8">
               <span>新疆哈密瓜50kg</span>
               <span>价值 : 1000</span>
             </div>
            </div>
          </div>
        </div>
      </div>
      <div class="d-9">
        <span>立即充值</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Wallet",
  data(){
    return{
      aa:true,
      bb:false,
      cc:false
    }
  },
  methods:{
    btn1(){
      this.aa=true
      this.bb=false
      this.cc=false
    },
    btn2(){
      this.aa=false
      this.bb=true
      this.cc=false
    },
    btn3(){
       this.aa=false
        this.bb=false
        this.cc=true
    }

  }
};
</script>

<style scoped>
.wp {
  width: 1040px;


}h3 {
  height: 60px;
  line-height: 60px;
  padding-left: 15px;
  border-bottom: 1px solid #e7e7e7;
}
h3 > span {
  color: #e85e35;
}
.d-1 {
  width: 100%;
  height: 100%;
  /* border: 1px solid #000; */
}
.d-2 {
  width: 1005px;
  height: 150px;
  margin: 0 auto;
  display: block;
  /* border: 1px solid #000; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.d-2>span{
  display: block;
}
.d-2>span:nth-child(1){
  margin-top: 30px;
  margin-left: 15px;

}
.d-2>div{
  margin-bottom: 30px; 
}

.d-3 {
  width: 500px;
  display: flex;
  justify-content: space-between;
}
.d-3 span{
  display: block;
  width: 115px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e7e7e7;
  line-height: 30px;
  
}
.d-2 .d-3 .on{
  background: #f4fff2;
  border: 1px solid #64a130;
}
.d-4{
  /* border: 1px red solid; */
  width: 1005px;
  margin: 0 auto;
}
.d-4 h4{
  color: #f08200;
  height:50px ;
line-height: 30px;
}
.d-5{
  width: 760px;

  display: flex;
  justify-content: space-between;

}
.d-6{
  width:360px ;
  height: 240px;
    border: 1px #e7e7e7 solid;
    padding: 10px;
    margin-left: 10px;
}
.d-6>span{
      display: block;
    height: 30px;
    line-height: 36px;
    margin-left: 15px;
}
.d-7{
  display: flex;

  justify-content: space-around;

}
.d-8{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.d-8 span:nth-child(1){
  margin-top: 30px;
  
}
.d-8 span:nth-child(2){
  margin-bottom: 60px;
  
}
.d-9{
  width: 1005px;
  margin: 0 auto;
}
.d-9 span{
  display: block;
  width: 150px;
  height: 50px;
  background: #f08200;
  border-radius: 8px;
  color: #fff;
  line-height: 50px;
  text-align:center;
  margin-top: 40px;
  cursor: pointer;
}
.el-main{
  overflow: hidden;

}
</style>
